<template>
  <div>
    <el-button
      type="primary"
      plain
      class="btn"
      size="small"
      @click.prevent="goBack()"
      >返回
    </el-button>
    <el-card shadow="never">
      <el-tree
        :data="list"
        ref="treeRef"
        show-checkbox
        node-key="roleId"
        :check-strictly="true"
        :default-checked-keys="authority"
        :props="{
          children: 'roleList',
          label: 'name',
        }"
      />
      <el-button type="text" @click="changeAuthority">确认修改</el-button>
    </el-card>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from "vue";
import { useRoute, useRouter } from "vue-router";
import { InitData } from "@/class/authority";
import { AuthorityList } from "@/request/api";

export default defineComponent({
  setup() {
    const route = useRoute();
    const router = useRouter();
    const params: any = route.params;
    const data = reactive(new InitData(params.id, params.authority));

    onMounted(() => {
      new AuthorityList().getAuthorityList().then((res) => {
        data.list = res.data;
      });
    });

    const changeAuthority = () => {
      console.log(
        data.treeRef.getCheckedKeys().sort(function (a: number, b: number) {
          return a - b;
        })
      );
    };

    const goBack = () => {
      router.push({
        path: "/role",
      });
    };

    return { ...toRefs(data), changeAuthority, goBack };
  },
});
</script>

<style lang="scss" scoped>
.btn {
  border: none;
  margin-bottom: 10px;
}
</style>
